<template>
  <div>
    <input type="text" v-model="person.name">
    <hr>
    <input type="text" v-model="person.age">
    <hr>
    {{person.fullName}}
    <hr>
    <input type="text" v-model="person.fullName">
  </div>
</template>

<script>
  import {reactive,computed} from 'vue'
  export default {
    setup(){
      let person = reactive({
        name:"zhangsan",
        age:18,
      })
      // let fullName = computed(()=>{
      //   return person.name+"-"+person.age
      // })
      // 简写成
      // let fullName = computed(()=> person.name+"-"+person.age)
      // 给person赋值，是简写形式，只能读，不能写
      person.fullName = computed(()=> person.name+"-"+person.age)
      // 完整写法，可读可写
      person.fullName = computed({
        get() {
          return person.name+"-"+person.age
        },
        set(value){
          const arr = value.split("-")
          person.name = arr[0]
          person.age=arr[1]
        },
      })
      return {
        person,
      }
    },
  }
</script>
